<template>
    <div>
        <van-nav-bar title="创建订单" left-text="" left-arrow />
        <div class="address" @click="address">
            <van-icon name="location-o" size="40" />
            <van-icon name="arrow" size="40" />
        </div>

        <div class="good">
            <div class="head ">
                <div>
                    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="">
                    <span>name</span>
                </div>
                <span>中山大学</span>
            </div>
            <div class="book">
                <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
            </div>
        </div>
        <div class="order">
            <ul>
                <li><span>书籍价格</span><span>￥45.9</span></li>
                <li><span>运费</span><span>￥0</span></li>
                <li><span>备注</span>
                    <input placeholder="请填写备注信息" />
                </li>
            </ul>
        </div>
        <van-submit-bar :price="3050" button-text="提交订单" label="实付款" @click="Submit" />
    </div>
</template>
<script setup>
import { showToast } from 'vant';
import { useRouter } from 'vue-router'
const router = useRouter()
const address = () => {
    router.push('/address')
}
const Submit = () => {
    showToast({
        message: '提交成功',
        icon: 'success',
    });
}
</script>
<style lang="scss" scoped>
.order {
    margin-top: 20px;

    li {
        border-bottom: 1px solid #cac6c6;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            padding-left: 10px;
            margin-right: 10px
        }

        input {
            height: 30px;
            outline: 0;
            border: 0;
            padding-left: 10px;
            margin-right: 130px;
        }
    }
}

::v-deep .van-card {
    height: 135px;
    background: #fff
}

.good .head {

    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;

    >div {
        display: flex;
        align-items: center;
    }

    span {
        padding-left: 5px;
        padding-right: 10px;
    }

    img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 0;
        margin: 5px 0 0 10px;
    }
}

.good {
    width: 370px;
    height: 180px;
    margin-top: 10px;
    background-color: #fff;
    box-shadow: 0px 7px 10px #D3D3D3;
    margin: 0 10px 0 10px;
    border-radius: 3px;

}

.address {
    margin-top: 10px;
    height: 100px;
    background: red
}

::v-deep .van-nav-bar .van-icon {
    color: #000;
    font-size: 18px;
}
</style>
